<template>
    <div class="company">

        <div v-if="show">
            <div class="title">
                {{ $t('assemble.公司账号注册') }}
            </div>
            <div class="inputBox">
                <div class="innerBox">
                    <input type="text" class="inputItem" v-model="companyName" @blur="handelcheckCompany"
                        :placeholder="$t('assemble.请输入公司名称')">
                </div>
                <div class="innerBox">
                    <input type="text" class="inputItem" v-model="email" :placeholder="$t('assemble.请输入邮箱地址')">
                </div>
                <div class="innerBox">
                    <input type="text" class="inputItem" v-model="captcha" @blur="checkCode"
                        :placeholder="$t('assemble.请输入验证码')">
                    <div v-if="codeflag" class="huoqu" @click="handleSendCode">{{ $t('assemble.获取') }}</div>
                    <div v-else class="huoqu">{{ time }}s</div>

                </div>
                <div class="innerBox">
                    <input type="text" class="inputItem" v-model="password" :placeholder="$t('assemble.请输入密码')">
                </div>
            </div>

            <div class="btns" @click="changeStatus">
                {{ $t('assemble.下一步') }}
            </div>
        </div>


        <div v-else>

            <div class="title" style="display: flex;">
                <div @click="changeStatus">{{ $t('assemble.上一步') }}</div>
                <div style="margin-left: 30px;">
                    {{ $t('assemble.完善资料') }}
                </div>
            </div>

            <div class="inputBox">
                <div class="innerBox">
                    <input type="text" class="inputItem" v-model="name" :placeholder="$t('assemble.请输入姓名')">
                </div>
                <div class="innerBox">
                    <input type="text" class="inputItem" v-model="phone" :placeholder="$t('assemble.请输入手机号')">
                </div>
                <div class="innerBox">
                    <input type="text" class="inputItem" v-model="mobile" :placeholder="$t('assemble.请输入电话')">
                </div>
            </div>

            <div class="btns" @click="handleSubmit">
                {{ $t('assemble.提交') }}
            </div>
        </div>

    </div>
</template>
<script>
import { Toast, } from 'vant';
import { sendcode, check, emailregister, onepage, checkCompany } from '../../utils/api'
export default {
    components: {

    },
    data() {
        return {
            content: "",
            show: true,
            companyName: "",//公司名称
            email: "",//邮箱
            captcha: "",//验证码
            password: "",//密码
            name: "",//姓名
            phone: "",//手机号
            mobile: "",//电话
            codeflag: true,//控制验证码
            time: 60,
        }
    },
    created() {

    },
    mounted() {
    },
    methods: {
        // 事件名称  注册register |  忘记密码resetpwd | 修改邮箱resetemail | 修改手机号resetmobile
        async handleSendCode() {
            if (this.email == "") {
                Toast(this.$t('assemble.请输入邮箱地址'));
                return
            }
            let that = this
            let res = await sendcode({
                email: that.email,
                event: 'register'
            })
            if (res.code == 1) {
                Toast(res.msg);
                that.codeflag = false
                const interval = window.setInterval(function () {
                    if ((that.time--) <= 0) {
                        that.time = 60
                        that.codeflag = true
                        window.clearInterval(interval)
                    }
                }, 1000)
            } else {
                Toast(res.msg);
            }
        },

        //验证公司名称
        async handelcheckCompany() {
            if (this.companyName == "") return
            let res = await checkCompany({
                company: this.companyName
            })
            if (res == 0) {
                Toast(this.$t('assemble.该公司名称已被注册！'));
            }
        },

        //注册校验验证码
        async checkCode() {
            if (this.captcha == "") return
            let res = await check({
                email: this.email,
                event: 'register',
                captcha: this.captcha
            })
            if (res.code != 1) {
                Toast(res.msg);
            }
        },

        changeStatus() {
            if (this.companyName == "") {
                Toast(this.$t('assemble.请输入公司名称'));
                return
            }
            if (this.email == "") {
                Toast(this.$t('assemble.请输入邮箱地址'));
                return
            }
            if (this.captcha == "") {
                Toast(this.$t('assemble.请输入验证码'));
                return
            }
            if (this.password == "") {
                Toast(this.$t('assemble.请输入密码'));
                return
            }
            this.show = !this.show
        },
        async handleSubmit() {
            if (this.name == "") {
                Toast(this.$t('assemble.请输入姓名'));
                return
            }
            if (this.phone == "") {
                Toast(this.$t('assemble.请输入手机号'));
                return
            }
            let data = {
                type: "1",
                company: this.companyName,
                email: this.email,
                captcha: this.captcha,
                password: this.password,
                name: this.name,
                phone: this.phone,
                mobile: this.mobile,
            }
            let res = await emailregister(data)
            if (res.code == 1) {
                this.show = false
                Toast(this.$t('assemble.请等待网易批准后登入系统'));
                this.$router.push({ path: '/pages/login/index' })
            } else {
                Toast(res.msg);
            }
        },
    },

}
</script>

<style scoped lang="scss">
@media screen and (max-width: 750px) {
    .title {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 20px;
        color: #333333;
        line-height: 23px;
        text-align: left;
        font-style: normal;
        text-transform: none;
        margin-top: 70px;
        margin-left: 40px
    }

    .inputBox {
        width: 335px;
        margin: 0 auto;
        margin-top: 50px;

        .inputItem {
            width: 335px;
            height: 52px;
            background: #F8F8F8;
            border-radius: 10px 10px 10px 10px;
            outline: none;
            border: none;
            margin-bottom: 20px;
            text-indent: 20px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 12px;
            line-height: 16px;
            text-align: left;
            font-style: normal;
            text-transform: none;

        }

        .innerBox {
            position: relative;
        }

        .huoqu {
            color: #E00000;
            position: absolute;
            top: 15px;
            right: 10px;
            font-size: 15px;

        }
    }

    .btns {
        width: 320px;
        height: 44px;
        background: #E00000;
        border-radius: 100px 100px 100px 100px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 15px;
        color: #FFFFFF;
        line-height: 44px;
        text-align: center;
        font-style: normal;
        text-transform: none;
        margin: 0 auto;
        margin-top: 58px;
    }


}

@media screen and (min-width: 751px) and (max-width: 1300px) {
    .title {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 28px;
        color: #333333;
        line-height: 23px;
        text-align: left;
        font-style: normal;
        text-transform: none;
        margin-top: 140px;
        margin-left: 80px
    }

    .inputBox {
        width: 90%;
        margin: 0 auto;
        margin-top: 50px;

        .inputItem {
            width: 100%;
            height: 82px;
            background: #F8F8F8;
            border-radius: 10px 10px 10px 10px;
            outline: none;
            border: none;
            margin-bottom: 60px;
            text-indent: 20px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 20px;
            line-height: 16px;
            text-align: left;
            font-style: normal;
            text-transform: none;

        }

        .innerBox {
            position: relative;
        }

        .huoqu {
            color: #E00000;
            position: absolute;
            top: 25px;
            right: 20px;
            font-size: 20px;

        }
    }

    .btns {
        width: 90%;
        height: 68px;
        background: #E00000;
        border-radius: 100px 100px 100px 100px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 24px;
        color: #FFFFFF;
        line-height: 68px;
        text-align: center;
        font-style: normal;
        text-transform: none;
        margin: 0 auto;
        margin-top: 58px;
    }
}
</style>